<template>
    <div class="auto-complete">
        <AutoComplete
        v-model="value"
        :disabled="disabled"
        :loading="loading"
        :transfer="true"
        @on-search="searchChange"
        @on-change="inputChange"
        @on-select="selectChange">
        <Option v-for="(item,index) in tableData" :value="optionValue(item)" :key="index">{{itemRender(item)}}</Option>
    </AutoComplete>
    </div>
</template>
<script>
import Selector from "@/components/selector";
import AutoComplete from "@/element/autoComplete";
import $ from "@/common";
export default {
  extends: Selector,
  data() {
    return {};
  },
  methods: {
    optionValue(item) {
      if (item && item[this.optionKey]) {
        return item[this.optionKey];
      } else {
        return item;
      }
    },
    selectChange(v) {
      for (let i in this.tableData) {
        var row = this.tableData[i];
        if (row[this.optionKey] === v) {
          this.$emit("selectChange", row);
        }
      }
    },
    searchChange(v) {
      this.inputChange(v);
    },
    inputChange(v) {
      if (this.disabled) return;
      this.$emit("inputChange", v);
      this.query(v, this.postData);
    },
    itemRender(v) {
      if (this.renderTpl) {
        return $.composeValue(this.renderTpl, v);
      } else {
        if (typeof v !== "object") {
          return v;
        } else {
          return v[this.optionCode] || v[this.optionKey];
        }
      }
    },
    fetchCheck() {
      return true;
    }
  },
  created() {},
  components: {
    AutoComplete
  }
};
</script>
<style lang="less">

</style>
